<script setup>
import MD5 from 'md5'
import { fanyiFn } from '@/api/fanyiApi';


import { ref } from 'vue'

const valueleft = ref('auto')
const valueright = ref('en')
const message = ref('')
const backmessage = ref('')
const options1 = [
    {
        valueleft: 'auto',
        label: '自动检测',
    },
    {
        valueleft: 'zh',
        label: '中文',
    },
    {
        valueleft: 'kor',
        label: '韩语',
    },
    {
        valueleft: 'en',
        label: '英语',
    },
    {
        valueleft: 'jp',
        label: '日语',
    },
    {
        valueleft: 'fra',
        label: '法语',
    },
    {
        valueleft: 'spa',
        label: '西班牙语',
    }, {
        valueleft: 'th',
        label: '泰语',
    }, {
        valueleft: 'ara',
        label: '阿拉伯语',
    },
    {
        valueleft: 'ru',
        label: '俄语',
    },
    {
        valueleft: 'pt',
        label: '葡萄牙语',
    },
    {
        valueleft: 'de',
        label: '德语',
    },
    {
        valueleft: 'it',
        label: '意大利语',
    },
]

const options2 = [
    {
        valueright: 'zh',
        label: '中文',
    },
    {
        valueright: 'kor',
        label: '韩语',
    },
    {
        valueright: 'en',
        label: '英语',
    },
    {
        valueright: 'jp',
        label: '日语',
    },
    {
        valueright: 'fra',
        label: '法语',
    },
    {
        valueright: 'spa',
        label: '西班牙语',
    }, {
        valueright: 'th',
        label: '泰语',
    }, {
        valueright: 'ara',
        label: '阿拉伯语',
    },
    {
        valueright: 'ru',
        label: '俄语',
    },
    {
        valueright: 'pt',
        label: '葡萄牙语',
    },
    {
        valueright: 'de',
        label: '德语',
    },
    {
        valueright: 'it',
        label: '意大利语',
    },
]

function fanyiClick() {
    fanyiFn({
        query: message.value,
        from: valueleft.value,
        to: valueright.value,
    }).then(res => {

        console.log(res);
        backmessage.value = res.data.trans_result[0].dst

    })

}

</script>

<template>
    <div class="container">
        <header class="navtop">
            <van-nav-bar title="万能翻译" left-arrow @click-left="$router.back()" z-index="99" fixed :border="false"
                safe-area-inset-top />
        </header>


        <van-cell-group inset>
            <van-field v-model="message" :autosize="{ maxHeight: 500, minHeight: 180 }" type="textarea"
                placeholder="输入文本" show-word-limit />
        </van-cell-group>

        <div class="select">
            <el-select v-model="valueleft" placeholder="Select" size="large" style="width: 240px;box-shadow: 0;">
                <el-option v-for="item in options1" :key="item.valueleft" :label="item.label" :value="item.valueleft" />
            </el-select>
            <el-icon>
                <Switch sizi="20" />
            </el-icon>
            <el-select v-model="valueright" placeholder="Select" size="large" style="width: 240px">
                <el-option v-for="item in options2" :key="item.valueright" :label="item.label"
                    :value="item.valueright" />
            </el-select>

        </div>
        <van-cell-group inset>
            <van-field v-model="backmessage" :autosize="{ maxHeight: 500, minHeight: 180 }" type="textarea"
                placeholder="输入文本" show-word-limit />
        </van-cell-group>

        <van-button @click="fanyiClick" block type="primary">
            翻译
        </van-button>
    </div>

</template>
<style scoped lang="scss">
.container {
    padding: 0 5%;
}

.navtop {
    height: 100px;

    .van-nav-bar {
        --van-nav-bar-icon-color: #1b1b1b;
        // --van-nav-bar-background: rgbr(0, 0, 0, 0) !important;
        --van-nav-bar-background: rgbr(0, 0, 0, 0);
    }
}

.van-cell-group {
    border: 0.5px solid #ccc;
    margin: 0;
    margin-bottom: 20px;

    --van-field-word-limit-line-height: 10px;
    // --van-field-text-area-min-height: 200px
}


.select {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    border: 0.5px solid #ccc;
    margin-bottom: 20px;

    :deep(.el-select) {
        color: red;

        .el-select__wrapper.is-focused {
            box-shadow: 0 var(--van-nav-bar-background);
        }

        .el-select__wrapper {
            color: red;
            box-shadow: 0 var(--van-nav-bar-background);
        }

    }

    .el-icon {
        margin: 0 20px;
        font-size: 15px;
    }
}
</style>